<template>
  <div>
    <context-holder />
    <a-button
      type="primary"
      @click="info"
    >Display normal message</a-button>

    <a-divider></a-divider>
    <a-button
      type="primary"
      @click="info1"
    >Display normal message</a-button>
    <a-divider></a-divider>
    <a-button
      type="primary"
      @click="openMessage"
    >
      Open the message box
    </a-button>
    <a-divider></a-divider>
  </div>
</template>
<script setup>
import { message } from 'ant-design-vue';
const [messageApi, contextHolder] = message.useMessage();
const info = () => {
  messageApi.info('Hello, Ant Design Vue!');
};
</script>
<script>


export default {
  methods: {
    info1() {

    },
    openMessage() {
      this.$message.config({
        bottom: `100px`,

      }),
      this.$message.loading({
        content: 'Loading...', key: '1', onClose() {
          console.log(1111);
        }
      });
      this.$message.loading({ content: 'Loading...11111111', key: '2' });

      setTimeout(() => {
        this.$message.success({
          
          content: 'Loaded!', key: '1', duration: 2, onClose() {
            console.log(1111);
          }
        });
        this.$message.success({ content: 'Loaded!2', key: '2', duration: 2 });
      }, 1000);
    },
    onClose1() {
      console.log('这里');
    }
  },
}

</script>
<style scoped lang='scss'>
</style>
